<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./Alibabafont/iconfont.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:courier new,courier,monospace}small{font-size:12px}ol,ul{list-style:none}a{text-decoration:none}up{vertical-align:text-top}sub{vertical-align:text-bottom}legend{color:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}

    .baner{
	    width: 10rem;
	     height:10rem;
	/*background: red;*/
	/*border:1px solid red;*/
    }
  .baner>img{
	  width: 10rem;
	  height:10rem;
  }
 /*2 商品题目一定要长一定要长一定要长一定要长一定要长一定要长一定要长一定要长*/
.pirce{
	width: 10rem;
	height:6.54rem;
	/*background: grey;*/
}
 .pirce-text{
   width: 10rem;
   height:1.2rem;
    box-sizing:border-box;
   padding:0.18rem 0.2rem 0 0.23rem;
   /*border:1px solid red;*/
 }
.pirce-text>p{
	font-size: 0.44rem;
}
.pirec-pirce{
	width: 10rem;
	height:1rem;
	/*border:1px solid red;*/
}
.pirec-pirce span:nth-child(1){
	font-size: 0.7rem;
	padding:0.6rem 0.6rem;
	color:red;
	line-height: 0.9rem;
}
.pirec-pirce span:nth-child(2){
	font-size:14px;
	color:red;
	border: 1px solid red;
	border-radius:3px;
}
.pirec-pirce span:nth-child(3){
	font-size:14px;
	color:#ff8000;
	border: 1px solid #ff8000;
}
.pirce-2{
	font-size:14px;
	width: 10rem;
	height:0.7rem;
	box-sizing:border-box;
	padding-left:0.2rem; 
	/*border:1px solid red;*/
}
.pirce-2>span:nth-child(2){
	font-size:0.38rem;
	text-decoration:line-through;
}
/*地址去*/
.addr{
	padding:0 0.11rem;
	box-sizing:border-box;
	width: 10rem;
	height:1rem;
	/*border:1px solid red;*/
	display: flex;
	justify-content: space-between;
}
.addr>p{
	line-height: 1rem;
	font-size: 0.4rem;
}
/*淘宝头条*/
.taobao-pic{
	margin-top: 0.3rem;
	padding:0 0.11rem;
	box-sizing:border-box;
	width: 100%;
	height:0.8rem;
	display: flex;
	justify-content: flex-start;
	/*border:1px solid red;*/
}
 .taobao-pic img{
	width:3.2rem;
	height:0.7rem;
 }
 .taobao-pic>p{
    line-height: 0.8rem;
    font-size: 0.42rem;
 }
/*7天无理由退货,工艺，蚂蚁*/
 .pirce-six{
 	margin-top: 0.3rem;
 	padding:0.1rem 0.15rem;
 	box-sizing:border-box;
 	width: 100%;
 	height:1rem;
 	display: flex;
 	justify-content: flex-start;
 	/*border:1px solid red;*/
 }
 .pirce-six>p{
 	box-sizing:border-box;
 	padding:0rem 0.15rem;
 	/*border:1px solid red;*/
 	font-size:0.4rem;
 	display: flex;
 	justify-content: flex-start;
 }
 .pirce-six>p>span>img{
 	width: 0.38rem;
 	height:0.38rem;
 }
 /*3评价评价评价评价评价评价评价*/
.pingjia{
	width: 10rem;
	height:6.1rem;
	border-bottom: 1px solid #d5d5d5;
	/*background: pink;*/
}
 .baobei{
 	width: 10rem;
 	height: 0.8rem;
 	/*border:1px solid red;*/
 }
 .baobei>p{
 	font-size: 0.46rem;
 	box-sizing:border-box;
 	padding:0.1rem 0 0 0.2rem;
 }
 .baobei1{
 	box-sizing:border-box;
 	width: 10rem;
 	height:2rem;
 	padding:0.03rem 0.2rem;
 	/*border:1px solid red;*/
 	display: flex;
 	flex-wrap: wrap;
 }
 .baobei1>p{
 	box-sizing:border-box;
 	font-size: 0.38rem;
 	padding:0.05rem;
 	margin-right: 0.1rem;
 	border-radius:10px; 
 	height: 0.6rem;
 	background:#ffefef; 
 }
.name{
 	width: 10rem;
 	height:3rem;
 	box-sizing:border-box;
 	/*padding-left:0.2rem;*/
 	/*border:1px solid red;*/
 }
.names-pic>img{
    width: 0.5rem;
    height:0.5rem;
}
.names span:nth-child(2){
    font-size: 0.47rem;
}
.name-p{
	font-size:0.4rem;
}
 .look{
	width: 10rem;
	height: 1rem;
	/*background: pink;*/
}
.look1{
	width: 3rem;
	height:0.8rem;
	margin: 0 auto;
	border:1px solid #ff8000;
	border-radius: 3px;
	margin-top: 0.5rem;
}
.look1>p{
    height:0.8rem;
    font-size: 0.45rem;
    text-align: center;
    color:#ff8000;
}
/*4商店名字商店名字商店名字商店名字商店名字*/
.shop-name{
	width: 10rem;
	height:5rem;
	/*background: green;*/
	box-sizing:border-box;
	/*padding:0.1rem 0.2rem ;*/
}
.shop-name1{
	width: 10rem;
	height:1.90rem;
	/*border:1px solid black;*/
	display: flex;
    justify-content: flex-start; 
}
.shop-left{
	width: 2rem;
	height:1.90rem;
	background: pink;
}
.shop-left>img{
    width: 2rem;
    box-sizing:border-box;
    border:1px solid #4e525e;
	height:1.90rem;
}
.shop-right{
	width: 8rem;
	height:1.90rem;
	/*background: yellow;*/
}
.shop-right>p{
	font-size: 0.5rem;
	line-height: 1rem;
    margin-left: 0.5rem;
}
.shop-right>span{
	margin-left: 0.5rem;
}
.shop-right>span>img{
  width: 0.56rem;
  height:0.56rem;
}
.name1{
	box-sizing:border-box;
	width:3.3rem;
	border-right: 1px solid #e0e0e0; 
}
 .name1>p,h3{
	font-size: 0.5rem;
	text-align: center;
 }
 .name1>h3{
	font-size: 0.5rem;
	text-align: center;
 }
.shop-name2{
   width: 10rem;
   height:0.8rem;
   /*background: green;*/
   display: flex;
   justify-content:space-around;
}
.shop-name2>p{
	box-sizing:border-box;
	color:#ff8000;
	padding:0 0.2rem;
	line-height: 1.5em;
	border:1px solid red;
	border-radius:5px;
	font-size: 0.47rem;
}
/*5 图文详情-3个选项*/
.text{
	border-top:0.4rem solid #c0c0c0;
	border-bottom:0.4rem solid #c0c0c0;
	width: 10rem;
	height: 1rem;
	/*background: yellow;*/
	display: flex;
	justify-content: space-around;
}
.text>li{
	line-height: 1rem;
    list-style: none;
    font-size: 0.45rem;
}
/*6 都是图片啊*/
.des{
	width: 10rem;
	height:100%;
	/*border-bottom:6px solid #c0c0c0; */
}
.des>img{
	width: 10rem;
}
/*7 登录注册 电脑版*/
.login{
	margin-top: 0.2rem;
	width: 10rem;
	height:2.6rem;
	background: #f3f3f3;
	margin-bottom: 1.5rem;
}
.login1{
	display: flex;
	/*border-bottom:1px solid #c0c0c0;*/
	justify-content: space-around;
}
.login1>li{
	height:1rem;
	line-height: 1rem;
	font-size: 0.5rem;
	list-style: none;
}
.login1>p{
	font-size: 0.4rem;
	line-height: 1.6rem;
	text-align: center;
}
/*最下面的功能区之导航键*/
.nav{
	position: fixed;
	bottom:0;
	z-index: 9999;
	width: 10rem;
	height:1.5rem;
	background: #f3f3f3;
	display: flex;
	justify-content: flex-start;
}
.nav-left{
	width: 4rem;
	height:1.5rem;
	/*border:1px solid red;*/
	display: flex;
	justify-content: flex-start;
}
.icon{
	width: 1.5rem;
   /*border:1px solid grey;*/
}
.icon>p{
	font-size: 0.4rem;
	text-align: center;
}
.icon>i{
    margin: 0.33rem;
 	font-size:0.57rem;
}
.nav-right{
	width: 6rem;
	height:1.5rem;
	display: flex;
/*	border: 1px solid grey;*/
	justify-content: flex-start;
}
.shop-car{
	width: 3rem;
	background:#ff9402; 
}
.shop-car>p,.must-buy>p{
   text-align: center;
   line-height:1.5rem; 
   font-size: 0.5rem;
   color:white;
}
.must-buy{
	width: 3rem;
	background:#ff5000;
}
	</style>
</head>
<body>
   <script src="./js/js-1.js"></script>
 <!--1 互动切换 -->
 <div class="baner">
 	   <img src="./img/goods-4.jpg">
 </div>
<!-- 2商品题目,价值，销量 -->
<div class="pirce">
	  <div class="pirce-text">
	  	  <p>红枣红枣红枣红枣红枣红枣红枣红枣红枣红枣枣250*2</p>
	  </div>
	  <div class="pirec-pirce">
	  	  <span>$23.9</span>
	  	  <span>女王节特惠</span>
	  	  <span>淘宝几笔2%</span>
	  </div>
	  <div class="pirce-2">
	  	 <span>价格：￥</span>
	  	 <span>39</span>
	  </div>
	  <div class="addr">
	  	  <p>快递：免运费</p>
	  	  <p>月销量1笔</p>
	  	  <p>广东佛山</p>
	  </div>
	  <div class="taobao-pic">
	       	<img src="./img/toutiao.png">
	  	    <p>发现新东西</p>
	  </div>
	  <!-- 下面第6小行7天没理由 蚂蚁，公益 -->
	  <div class="pirce-six">
	  	  <p>
	  	  <span><img src="./img/goods/right.png"></span>
	  	  <span>7天无理由</span>
	  	  </p>
	  	  <p>
	  	  <span><img src="./img/goods/right.png"></span><span>公益宝贝</span>
	  	  </p>
	  	  <p>
	  	  <span><img src="./img/goods/right.png"></span><span>蚂蚁花吧</span>
	  	  </p>
	  </div>
</div>
 <!-- 3评价一下 -->
<div class="pingjia">
	<div class="baobei">
		<p>宝贝评价（1111）</p>
	</div>
	<div class="baobei1">
		<p>划算+（40）</p>
		<p>味道好+（23）</p>
		<p>物流快+（22）</p>
		<p>质量好+（10）</p>
		<p>口感+（45）</p>
		<p>何谈+(66)</p>
	</div>
	<div class="name">
		<div class="names">
			<p>
			<span class="names-pic"><img src="./img/goods/touxiang.jpg"></span>
			<span>卢大富</span>
			<span class="names-pic"><img src="./img/goods/heart.png"><img src="./img/goods/heart.png"></span>
			</p>
		</div>
		<div class="name-p">
			<p>难吃的要死，在也不会来了.祝店家倒闭！！！！！</p>
		</div>
		<div class="look">
		     <div class="look1">
		     	<p>查看全部评价</p>
		     </div>
	    </div>
	</div>
</div>
<!--4 商店名字 商店名字商店名字-->
<div class="shop-name">
	  <div class="shop-name1">
	  	  <div class="shop-left">
	  	  	<img src="./img/goods/maijia.jpg">
	  	  </div>
	  	  <div class="shop-right">
	  	  	 <p>水果店 水果直销</p>
	  	  	 <span>
	  	  	    <img src="./img/goods/huangguan.png">
	  	  	    <img src="./img/goods/huangguan.png">
	  	  	    <img src="./img/goods/huangguan.png">
	  	  	 </span>
	  	  </div>
	  </div>
	  <div class="shop-name1">
	  	<div class="name1">
	  		<p>29</p>
	  		<h3>全部宝贝</h3>
	  	</div>
	  	<div class="name1">
	  		<p>1</p>
	  		<h3>伤心宝贝</h3>
	  	</div>
	  	<div class="name1">
	  		<p>2.9亿</p>
	  		<h3>关注人数</h3>
	  	</div>
	  </div>
	  <div class="shop-name2">
	  	  <p>查看匪类</p>
	  	  <p>进去看看</p>
	  </div>
</div>
<!-- 5图文详情3个选项 -->
<div class="text">
	<li>图文详情</li>
	<li>产品数据</li>
	<li>店铺推荐</li>
</div>
<!-- 6 都是图片啊 -->
<div class="des">
	<img src="./img/goods/des0.webp">
	<img src="./img/goods/des1.webp">
	<img src="./img/goods/des2.webp">
	<img src="./img/goods/des3.webp">
	<img src="./img/goods/des6.webp">
</div>
<!-- 7 登录注册 电脑版-->
<div class="login">
	<div class="login1">
		<li>登录</li>
		<li>注册</li>
		<li>意见反馈</li>
		<li>电脑版</li>
	</div>
	<div class="login1">
		<p>&copy;2015 浙B2-20001121 服务中心</p>
	</div>
</div>
<!--最下面的功能区之导航键-->
 <div class='nav'>
 	  <div class="nav-left">
 	  	  <div class="icon">
 	  	  	<i class="iconfont icon-zhuye"></i>
 	  	  	<p>客服</p>
 	  	  </div>
 	  	  <div class="icon">
 	  	  	<i class="iconfont icon-zhuye"></i>
 	  	  	<p>店铺</p>
 	  	  </div>
 	  	  <div class="icon">
 	  	  	<i class="iconfont icon-zhuye"></i>
 	  	  	<p>收藏</p>
 	  	  </div>
 	  </div>
 	  <div class="nav-right">
 	  	<div class="shop-car">
 	  		<p>加入购物车</p>
 	  	</div>
 	  	<div class="must-buy">
 	  		<p>立即购买</p>
 	  	</div>
 	  </div>
 </div>


</body>
</html>
